<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素 块级元素</title>
</head>
<style>
    #outer{
        background-color:orange;
    }

    #inner1{
        width:100px;
        height:100px;
        background-color:gray;
    }

    #inner2{
        width:100px;
        height:100px;
        background-color:pink;
    }

    p{
        /* height:100px;   无效*/
        padding-left: 10px;
        line-height:100px;
    }
</style>
<body>
    <!-- 
        1. 块级元素：
            1. 独占一行
            2. 高度 行高 外边距 内边距 都可以控制
            3. 元素的宽度不指定的话默认为父元素宽度的100% 高度不指定的话由子元素决定
            4. 多个块元素标签写在一起，默认排列方式为从上至下

            常见块元素：
                <address>  // 定义地址 
                <caption>  // 定义表格标题 
                <dd>      // 定义列表中定义条目 
                <div>     // 定义文档中的分区或节 
                <dl>    // 定义列表 
                <dt>     // 定义列表中的项目 
                <fieldset>  // 定义一个框架集 
                <form>  // 创建 HTML 表单 
                <h1>    // 定义最大的标题
                <h2>    // 定义副标题
                <h3>     // 定义标题
                <h4>     // 定义标题
                <h5>     // 定义标题
                <h6>     // 定义最小的标题
                <hr>     // 创建一条水平线
                <legend>    // 元素为 fieldset 元素定义标题
                <li>     // 标签定义列表项目
                <noframes>    // 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
                <noscript>    // 定义在脚本未被执行时的替代内容
                <ol>     // 定义有序列表
                <ul>    // 定义无序列表
                <p>     // 标签定义段落
                <pre>     // 定义预格式化的文本
                <table>     // 标签定义 HTML 表格
                <tbody>     // 标签表格主体（正文）
                <td>    // 表格中的标准单元格
                <tfoot>     // 定义表格的页脚（脚注或表注）
                <th>    // 定义表头单元格
                <thead>    // 标签定义表格的表头
                <tr>     // 定义表格中的行


        2. 行内元素：
            1. 不会独占一行，相邻元素会排在一行，直到排不下才会自动换行
            2. 宽度随着元素内容变化
            3. 设置高宽无效，对外边距和内边距仅仅设置左右方向有效 上下无效
            4. 设置行高有效 等同于给父元素设置行高
            5. 行内元素不能放块级元素
        
            常见的行内元素：
                    <a>     // 标签可定义锚 
                    <abbr>     // 表示一个缩写形式 
                    <acronym>     // 定义只取首字母缩写 
                    <b>     // 字体加粗 
                    <bdo>     // 可覆盖默认的文本方向 
                    <big>     // 大号字体加粗 
                    <br>     // 换行 
                    <cite>     // 引用进行定义 
                    <code>    // 定义计算机代码文本
                    <dfn>     // 定义一个定义项目
                    <em>     // 定义为强调的内容
                    <i>     // 斜体文本效果
                    <kbd>     // 定义键盘文本
                    <label>     // 标签为 input 元素定义标注（标记）
                    <q>     // 定义短的引用
                    <samp>     // 定义样本文本
                    <select> // 创建单选或多选菜单
                    <small>     // 呈现小号字体效果
                    <span>     // 组合文档中的行内元素
                    <strong> // 加粗
                    <sub>     // 定义下标文本
                    <sup>     // 定义上标文本
                    <textarea>     // 多行的文本输入控件
                    <tt>     // 打字机或者等宽的文本效果
                    <var>    // 定义变量
        
        3. 行内块元素
            1. 高度、行高、外边距以及内边距都可以控制
            2. 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙
                <button> 
                <input>   
                <textarea> 
                <select> 
                <img>

        4. 元素类型转换
                    display: block | inline | inline-block

        5. 总结
            主要关注：一是排列方式，二是宽高边距设置，三是默认宽度
            （1）块级元素会独占一行，而内联元素和内联块元素则会在一行内显示
            （2）块级元素和内联块元素可设置 width、height 属性，而内联元素设置无效
            （3）块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度
     -->
     <div id='outer'>
         <div id="inner1"></div>
         <div id="inner2"></div>
         <p>我是行内元素</p>
     </div>

     <script>
         const box1 = document.getElementById('outer');

         const w1 = window.getComputedStyle(box1).width;
         const h1 = window.getComputedStyle(box1).height;

         console.log(w1, h1);   // height 为 200px
     </script>
</body>
</html>